<template>
  <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
    <el-row :gutter="20">
      <template v-for="item in list" :key="item.id">
        <el-col :span="24" v-if="item.name == 'mqtt_opinfo'">
          <el-form-item :label="item.remark" :prop="item.name">
            <wang-edior v-model="item.value" />
          </el-form-item>
        </el-col>
        <el-col :span="12" v-else>
          <el-form-item :label="item.remark" :prop="item.name">
            <el-input v-model="item.value" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </template>
    </el-row>
  </el-form>
  <div style="text-align: center; margin-top: 15px">
    <span class="dialog-footer">
      <el-button type="primary" :loading="saveLoading" @click="save">保存</el-button>
    </span>
  </div>
</template>

<script lang="ts" setup>
import WangEdior from '@/components/WangEdior/index.vue'
import { ElMessageBox, ElMessage, FormInstance, ElNotification } from 'element-plus'
import { nextTick, onMounted, reactive, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { configList, saveConfig } from '@/api/admin'

const props = defineProps({
  group: {
    type: String,
    default: 'admin',
  },
})
const ruleForm = reactive({})
const rules = reactive({})
const saveLoading = ref(false)
const loading = ref(true)
const list = ref()

const getList = () => {
  loading.value = true
  configList({
    group: props.group,
  }).then((res) => {
    if (res.code == 200) {
      list.value = res.data
    }
    loading.value = false
  })
}
const save = () => {
  list.value.forEach((item) => {
    ruleForm[item.name] = item.value
  })
  saveLoading.value = true
  saveConfig(ruleForm).then((res) => {
    if (res.code == 200) {
      ElNotification({
        title: res.data,
        message: res.msg,
        type: 'success',
      })
      getList()
    }
    saveLoading.value = false
  })
}

nextTick(() => {
  getList()
})
</script>

<style scoped lang="scss">
</style>
